Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > Japanese - 日本語 > XPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

Community articleXPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
Added by ~Miriam Quettoomannivu | Edited by ~Miriam Quettoomannivu on May 16, 2013 | Version 6
expanded Abstract
collapsed Abstract
No abstract provided.
ShowTable of Contents
HideTable of Contents
  • 1 はじめに(完成形と効果)
  • 2 準備する物
  • 3 作成するXPagesファイルの構成
  • 4 jQueryMobileをNSFファイルに組み込む
  • 5 XPagesにjQueryMobileを組み込む
  • 6 1ページ目:ビューのカテゴリを表示する①
  • 7 2ページ目:ビューのカテゴリを表示する②
  • 8 3ページ目:ビューの文書を表示する
  • 9 4ページ目:フォームを表示する
  • 10 戻るボタンを作る

はじめに(完成形と効果)

ノーツのカテゴリと添付ファイルを表示するモバイルメニュー紹介アプリです。

準備する物

  • テキストフィールドと画像添付用のリッチテキストフィールド、添付された画像のファイル名を計算する複数値可能フィールドを配置します。

  • ビューは2段階のカテゴリを付けたビューです。

  • データは適当に項目を入力し、画像ファイルを添付しておきます。

 

作成するXPagesファイルの構成

下記の4つのXpagesを作成します。

Xpagesの名前

内容

cate1.xsp

1ページ目

リスト(ビュー)表示。カテゴリ1階層目。

cate2.xsp

2ページ目

リスト(ビュー)表示。カテゴリ2階層目。

cate3.xsp

3ページ目

リスト(ビュー)表示。イメージと文書を表示。

frm.xsp

4ページ目

フォーム表示。

 

 

jQueryMobileをNSFファイルに組み込む

1.jQueryのHPからjQueryとjQueryMobileをダウンロードします。

種類

URL

内容

JavaScriptライブラリ

http://code.jquery.com/jquery-1.9.1.min.js

jQuery本体

一括ダウンロード用

圧縮ファイル

http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.zip

 

jQueryMobile本体

jQueryMobileCSS

画像などリソースファイル

※バージョンが変わっている場合はこちらから

http://jquery.com/download/

http://jquerymobile.com/download/

 

2.ダウンロードしたjquery.mobile-1.3.0.zipを適当なフォルダに解凍します。

 

3.jQueryを組み込みたいノーツアプリケーションを開き、設計要素から「リソース-ファイル」を開きます。

 

4.[ファイルリソースのインポート]ボタンを押し、ダウンロードしたjQuery、jQueryMobileを登録します。

種類

ファイル名

補足

JavaScriptライブラリ

jquery-1.9.1.min.js

 

JavaScriptライブラリ

jquery.mobile-1.3.0.min.js

 

jquery.mobile-1.3.0.zipを解凍したファイル

スタイルシート

jquery.mobile-1.3.0.min.css

jquery.mobile-1.3.0.zipを解凍したファイル

【イメージ】

 

5.jquery.mobile-1.3.0.zipを解凍したフォルダから画像ファイルをイメージリソースに登録します。

標準ではpngファイルが選択できないので、ファイル名に「*.*」と入力し、全てのファイルを表示させます。

取り込んだファイルにはフォルダ名がつかないので、名前の変更を使ってファイル名の前に「images/」というパスを追加します。

フォルダ

ファイル名(ファイルシステム)

インポート後の名前(イメージリソース)

images

ajax-loader.gif

images /ajax-loader.gif

images

icons-18-black.png

images /icons-18-black.png

images

icons-18-white.png

images /icons-18-white.png

images

icons-36-black.png

images /icons-36-black.png

images

icons-36-white.png

images /icons-36-white.png

【イメージ】

 

 

XPagesにjQueryMobileを組み込む

  • 新規Xpagesを作成し、ソースタブにjquery moibileを組み込むためのタグを書き込みます。Xpagesのプロパティ-リソースからファイルを順番に選択しても同様の操作が可能です。

【XPagesソース】

	<xp:this.resources>

	        <xp:script src="/jquery-1.9.1.min.js" clientSide="true"></xp:script>

	        <xp:script src="/jquery.mobile-1.3.0.min.js"

	                clientSide="true">

	        </xp:script>

	        <xp:styleSheet href="/jquery.mobile-1.3.0.min.css"></xp:styleSheet>

	</xp:this.resources>

	

【イメージ】

 

 

1ページ目:ビューのカテゴリを表示する①

1.データリソースとしてカテゴリのビューを登録します。

【イメージ】

 

2.1ページ目はカテゴリのみ表示するため、データソースプロパティの「expandLevel」に“1”を指定します。

【イメージ】

 

3.XpagesのソースにjQueryMobileでヘッダー、コンテンツの基本構文となるタグを入力します。(データソースが指定してあるタグの下)

【XPagesソース】

	<!--ページの設定-->

	<div data-role="page">

	        <!--ヘッダの設定-->

	        <div data-role="header">

	        </div>

	               

	        <!--コンテンツの設定-->

	        <div data-role="contents">

	        </div>

	</div>

	

【イメージ】

 

4.テーマカラーを変更したい場合には、divタグに「data-theme」を指定します。

【XPagesソース】

	<!--ページの設定-->

	<div data-role="page" data-theme="b">

	

 

5.ヘッダータグに内容を設定します。

【XPagesソース】

	<div data-role="header">

	        <h1>分類</h1>

	</div>

	

 

6.コンテンツの中に

    タグを配置し、ListViewを作ります。

【XPagesソース】

	<!--コンテンツの設定-->

	<div data-role="contents">

	        <ul data-role="listview">

	                       

	        </ul>

	</div>

	

【イメージ】

 

7.右のコンテナコントロールから繰り返しコントロールをドラッグ&ドロップでListViewタグの下に配置し、繰り返しコントロールの名前(デフォルトはrepeat1を消します。(名前が残っているとjquery mobileのスタイルが反映されません。)

【XPagesソース】

	<!--コンテンツの設定-->

	<div data-role="contents">

	        <ul data-role="listview">

	                <xp:repeat rows="30" value="#{view1}">

	 

	</xp:repeat>

	        </ul>

	</div>

	

 

8.ページ替えをさせないため、オプションの繰り返し頻度には大きな値を入れ(例では9999)、コレクション名に「dataRow」と設定します。

【イメージ】

 

9.

  • タグを入れます。
  • 【XPagesソース】

    	<ul data-role="listview">

    	        <xp:repeat rows="9999" value="#{view1}">

    	                <li>

    	                                               

    	                </li>

    	</xp:repeat>

    	</ul>

    	

     

    9.右のコアコントロールからリンクコントロールをドラッグ&ドロップで

  • タグの下に配置し、ラベルを消します。
  • 【XPagesソース】

    	<xp:repeat value="#{view1}" var="dataRow" rows="9999">

    	       <li>

    	              <xp:link escape="true" id="link1">

    	 

    	</xp:link>

    	       </li>

    	</xp:repeat>

    	

     

    10.右のコアコントロールから計算結果フィールドをドラッグ&ドロップでリンクコントロールの下に配置します。

    【XPagesソース】

    	<li>

    	       <xp:link escape="true" id="link1">

    	              <xp:text escape="true"

    	                     id="computedField1">

    	              </xp:text>

    	       </xp:link>

    	</li>

    	

     

    11.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、2ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。

    【SSJSソース】

    "/cate2.xsp?OpenXpage&categoryFilter=" + dataRow.getColumnValues().get(0)

    【イメージ】

     

    11.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。

    【SSJSソース】

    dataRow.isCategory() ? dataRow.getColumnValues().get(0) : null

    【イメージ】

     

    12.スマートフォンの画面にあわせるため、サイズをデバイスの幅に指定するHTMLをXPagesソースに書き込みます。(データソース指定の下あたり)

    【XPagesソース】

    	<!-- サイズをデバイスの幅に設定、倍率を固定-->

    	<meta name="viewport" content="width=device-width, initial-scale=1" />

    	

    【イメージ】

     

     

    2ページ目:ビューのカテゴリを表示する②

    1.1ページ目(cate1.xsp)をコピーし、2ページ目(cate2.xsp)にリネームします。

     

    2.2ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

    【XPagesソース】

    	<div data-role="header">

    	        <h1>種別</h1>

    	</div>

    	

     

    2.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、3ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。(URL引数から1階層目、クリックした列から2階層目を取得)

    【SSJSソース】

    	"/cate3.xsp?OpenXpage&categoryFilter=" + param.get("categoryFilter") + "\\" + dataRow.getColumnValues().get(1)

    	

    【イメージ】

     

    3.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。(2列目を取得)

    【SSJSソース】

    	dataRow.isCategory() ? dataRow.getColumnValues().get(1) : null

    	

    【イメージ】

     

     

    3ページ目:ビューの文書を表示する

    1.1ページ目(cate1.xsp)をコピーし、3ページ目(cate3.xsp)にリネームします。

     

    2.3ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

    【XPagesソース】

    	<div data-role="header">

    	        <h1>メニュー</h1>

    	</div>

    	

     

    3.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、4ページ目のXpagesを指定し、URL引数にdocumentIdを設定します。

    【SSJSソース】

    	"/frm.xsp?OpenXpage&documentId="+dataRow.getDocument().getUniversalID();

    	

    【イメージ】

     

    4.リンクコントロールを選択し、オプション-リンクイメージを追加にチェックを付け、イメージの横にある◇をクリックし、添付ファイル画像を表示する式を書き込みます。(表示される添付ファイルは一つ目)

    【SSJSソース】

    	"/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileNameList"),1)

    	

    【イメージ】

     

    4.計算結果フィールドを選択し、値で単純データバインディングを選択肢、データソース「dataRow」、バインド先「Subject(件名)」を選択します。(dataRowは繰り返しコントロールのコレクション名)

    【XPagesソース】

    	<!-- 品名 -->

    	<xp:text escape="true" id="computedField1"

    	        value="#{dataRow.Subject}">

    	</xp:text>

    	

    【イメージ】

     

    5.右のコアコントロールから計算結果フィールドをドラッグ&ドロップで品名用の計算結果フィールドの下に配置し、単純データバインディングでデータソース「dataRow」、バインド先「Price(金額)」を選択します。

    【XPagesソース】

    	<!-- 金額 -->

    	<xp:text escape="true" id="computedField2"

    	        value="#{dataRow.Price}">

    	</xp:text>

    	

     

    6.体裁を整えるために、品名用の計算結果フィールドを{

    }タグで囲い、金額用の計算結果フィールドを{

    }タグで囲います。

    【XPagesソース】

    	<!-- 品名 -->

    	<h1>

    	<xp:text escape="true" id="computedField1"

    	                value="#{dataRow.Subject}">

    	        </xp:text>

    	</h1>

    	<!-- 金額 -->

    	<p>

    	        <xp:text escape="true" id="computedField2"

    	                value="#{dataRow.Price}">

    	        </xp:text>

    	</p>

    	

     

    7.必要に応じて、計算結果フィールドの値の表示タイプやスタイルを変更して下さい。

     

     

    4ページ目:フォームを表示する

    1.1ページ目(cate1.xsp)をコピーし、4ページ目(frm.xsp)にリネームします。

     

    2.4ページ目のXPagesを開き、データソースを選択、Dominoビューのデータソースを削除し、Domino文書のデータソースを追加。フォームを選択し、デフォルトアクションには「文書を開く」を選択します。

    【イメージ】

     

    3.ソースタブでヘッダーの内容を変更します。

    【XPagesソース】

    	<div data-role="header">

    	        <h1>詳細</h1>

    	</div>

    	

     

    4.繰り返しコントロールと、その中に挟まれたXPagesソースを削除します。

     

    5.Listviewの中に<li>タグを配置し、計算結果フィールドで「Subject(品名)」と「Price(金額)」を表示します。

    【XPagesソース】

    	<ul data-role="listview">

    	        <li>

    	                <!-- 品名 -->

    	                <h1>

    	                        <xp:text escape="true" id="computedField1"

    	                                value="#{document1.Subject}">

    	                        </xp:text>

    	                </h1>

    	                <!-- 金額 -->

    	                <p>

    	                価格:

    	                <xp:text escape="true" id="computedField2"

    	                        value="#{document1.Price}">

    	                </xp:text>

    	                </p>

    	        </li>

    	</ul>

    	

     

    6.Listviewの下に繰り返しコントロールを配置します。(複数の添付ファイル画像を表示するため)

     

    7.繰り返しコントロールを選択し、名前を削除、単純データバインディングで添付ファイル名の入っているフィールドを選択する。コレクション名には「filelist」と入力します。

    【Xpagesソース】

    	<xp:repeat rows="30" value="#{document1.ImageFileNameList}"

    	        var="filelist">

    	</xp:repeat>

    	

    【イメージ】

     

    8.繰り返しコントロールのタグ内にイメージコントロールを配置し、イメージリソースに添付ファイルを読み込むコードを書き込みます。(一番後ろの「filelist」は繰り返しコントロールのコレクション名)

    【SSJSソース】

    	"/"+document1.getDocument().getUniversalID()+"/$File/"+filelist

    	

    【イメージ】

     

     

    戻るボタンを作る

    • ヘッダー部分に戻るボタンを追加するには、2ページ目以降のpageコントロールを下記のように書き換えます。

    【Xpagesソース】

    	<div data-role="page" data-add-back-btn="true" data-theme="b">

    	       <!--ヘッダの設定-->

    	       <div data-role="header">

    	              <a href="" data-rel="back">戻る</a>

    	              <h1>種別</h1>

    	       </div>

    	

     

    expanded Attachments (0)
    collapsed Attachments (0)
    expanded Versions (15)
    collapsed Versions (15)
    Version Comparison     
    VersionDateChanged by              Summary of changes
    15May 21, 2013, 11:03:18 AM~Rebecca Umkipuljip  
    14May 21, 2013, 11:02:36 AM~Miriam Quettoomannivu  
    13May 21, 2013, 11:01:51 AM~Miriam Quettoomannivu  
    12May 21, 2013, 2:23:30 AM~Miriam Quettoomannivu  
    11May 20, 2013, 10:55:20 AM~Miriam Quettoomannivu  
    10May 20, 2013, 10:49:57 AM~Miriam Quettoomannivu  
    9May 16, 2013, 3:21:15 PM~Miriam Quettoomannivu  
    8May 16, 2013, 3:19:19 PM~Miriam Quettoomannivu  
    7May 16, 2013, 12:14:22 PM~Miriam Quettoomannivu  
    This version (6)May 16, 2013, 12:10:27 PM~Miriam Quettoomannivu  
    5May 16, 2013, 12:06:41 PM~Miriam Quettoomannivu  
    4May 16, 2013, 11:54:44 AM~Miriam Quettoomannivu  
    3May 16, 2013, 11:53:00 AM~Miriam Quettoomannivu  
    2May 16, 2013, 11:47:02 AM~Miriam Quettoomannivu  
    1May 16, 2013, 11:42:22 AM~Miriam Quettoomannivu  
    Copy and paste this wiki markup to link to this article from another article in this wiki.
    Go ElsewhereStay ConnectedAbout
    • HCL Software
    • HCL Digital Solutions community
    • HCL Software support
    • BlogsDigital Solutions blog
    • Community LinkHCL Software forums and blogs
    • About HCL
    • Privacy
    • Accessibility